<!-- 活动核销 -->
<template>
  <view :style="(!isRefundOrder && eventsOrder.orderStatus!=='3' && eventsOrder.orderStatus!=='4')
   && (!reviewInfo || reviewInfo.id<=0)?'':'padding-bottom: calc(env(safe-area-inset-bottom))'" :class="eventsOrder.orderStatus === '0' ? 'ing-sf container' : eventsOrder.orderStatus==='1' ?'container' : 'oth-sf container'">
    <view class="data-box">
      <!-- 标题 -->
      <view class="title u-line-2"> {{ eventsOrder.eventsName }} </view>
      <view class="events-order">
        订单编号：{{ eventsOrder.eventsOrderNo }}
        <text style="padding:0 30rpx;" @click="copyOrder">复制</text>
      </view>
      <view class="main_top">
        <view class="main_top_title">{{ !isRefundOrder?getOrderStatus():getRefundStatus() }}</view>
        <view class="main_top_btn">
          <view class="cancel_button u-center" @click="click('/user/order/cancelOrder?isDetail=true&data=' + encodeURIComponent(JSON.stringify(eventsOrder)))" v-if="eventsOrder.orderStatus==='0' && !isRefundOrder">取消</view>
          <view class="cancel_button u-center" v-if="isRefundOrder" @click="click('/pages/refundProgress?id=' + refundOrderId)">查看退款进度</view>
          <view @click="click('/user/order/cancelOrder?isRefund=true&isDetail=true&data=' + encodeURIComponent(JSON.stringify(eventsOrder)))"
                  class="cancel_button u-center" v-if="eventsOrder.orderStatus === '1' && !isRefundOrder">
            申请退款
          </view>
        </view>
      </view>
      <!-- 联系人信息 -->
      <view class="box-content">
        <view class="box-title">
          <img class="icons" src="https://img.qumoyugo.com/webimgbg/picopino_icon_pay_baom_info.png">
          报名及联系人信息
        </view>
        <view style="display:flex">
          <view class="current-ord-if">
            {{eventsOrder.packageName}}
          </view>
        </view>
        <view class="contact-info">
          <view class="text-title">姓&nbsp;&nbsp;&nbsp;名：{{ eventsOrder.applyName }}</view>
        </view>
        <view class="contact-info">
          <view class="text-title">手机号：{{ eventsOrder.applyPhone }}</view>
        </view>
        <view class="contact-info">
          <view class="text-title-remark">备&nbsp;&nbsp;&nbsp;注：</view>
          <view class="text-data-remark">{{ eventsOrder.orderRemark }}</view>
        </view>
      </view>
      <!-- 参与人信息 -->
      <view class="box-content" style="margin-bottom: 10px;padding-bottom: 20rpx" v-if="person.list.length">
        <view class="box-title">
          <img class="icons" src="https://img.qumoyugo.com/webimgbg/picopino_icon_pay_pet-canyu.png">
          参与人信息
        </view>
        <view class="box-data">
          <view class="data-warp" v-for="(item, index) in person.list" :key="index">
            {{ item.perName || item.name }}
          </view>
        </view>
      </view>
      <view class="box-content" style="margin-bottom: 10px;padding-bottom: 20rpx" v-if="pet.list.length">
        <view class="box-title">
          <img class="icons" src="https://img.qumoyugo.com/webimgbg/picopino_icon_pay_person-canyu.png">
          参与宠物信息
        </view>
        <view class="box-data">
          <view class="data-warp" v-for="(item, index) in pet.list" :key="index">
            {{ item.petName || item.name }}
          </view>
        </view>
      </view>
      <!-- 优惠情况 -->
      <view class="box-content">
        <view class="box-title">
          <img class="icons" src="https://img.qumoyugo.com/webimgbg/picopino_icon_pay_youhui_info.png">
          优惠情况
        </view>
        <view class="coupon-info">
          <view style="font-weight:bold">小饼干抵扣</view>
          <view class="text-data">
            {{biscuitDeduction}}
          </view>
        </view>
        <view class="coupon-info border-bt">
          <view style="font-weight:bold">优惠券</view>
          <view class="text-data">{{eventsOrder.couponMoney ? `使用优惠券 抵扣${eventsOrder.couponMoney / 100}元` : '未选择' }}</view>
        </view>
      </view>
    </view>
    <view class="booking_div"
    v-if="(!isRefundOrder && eventsOrder.orderStatus!=='3' && eventsOrder.orderStatus!=='4') && (!reviewInfo || reviewInfo.id <= 0)">
      <view class="price-data">
        <view>
          <view style="display:flex;height:42rpx;align-items: flex-end;">
            <view class="price-data-title">报名费用</view>
            <view class="price-data-content">
              <span class="price-icon">￥</span>
              <span  class="price-number">{{ eventsOrder.payMoney / 100}}</span>
            </view>
          </view>
          <view style="display:flex;height:42rpx;align-items: flex-end;" v-if="eventsInfo.isConfigShare">
            <view class="price-data-title">拉新已减免</view>
            <view class="price-data-content">
              <span class="price-icon">￥{{ eventsOrder.shareDeductionMoney / 100}}</span>
            </view>
          </view>
        </view>
        <view class="booking" @click="toPay()" v-if="eventsOrder.orderStatus==='0'">
          支付
        </view>
        <view class="booking" @click="review.clickReview(eventsOrder)" v-if="eventsOrder.orderStatus==='2' && (!reviewInfo || reviewInfo.id <= 0)">
          评价
        </view>
        <view class="booking" @click="createOrCode" v-if="eventsOrder.orderStatus==='1'">
          展示二维码
        </view>
      </view>
    </view>
    <uni-popup ref="orCodePopup" background-color="#fff" type="center">
      <view class="orCode_div">
        <canvas v-show="false" type="2d" id="orCode"/>
        <view class="orCode_title">{{ eventsOrder.randomUuid }}</view>
        <view class="orCode_border">
          <image class="orCode_img" :src="orCodeUrl"/>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="popup" background-color="#fff" type="bottom">
      <view class="review_popup">
        <view class="startLevel">
          <span>服务满意度：</span>
          <uni-rate size="18" v-model="review.starLevel" disabledColor="#EE751E"/>
        </view>
        <view class="review_content">
          <uni-easyinput autoHeight type="textarea" v-model="review.content" maxlength="255" placeholder="请留下你宝贵的评价"/>
        </view>
        <view class="file_div">
          <view class="upload-img">
            <uni-file-picker limit="9" title="上传图片" @select="successHandler" @delete="deleteHandler"></uni-file-picker>
          </view>
        </view>
        <view class="bottom_div_popup">
          <button class="submitOrder" @click="review.submit">
            发布
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ossConfig } from '@/utils/alioss.js'
import { ref, getCurrentInstance, computed, onBeforeUnmount } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties

const popup = ref()
const payWait = ref(false)

const uploadImg = ref([])
const videosList = ref([])
const successHandler = (e) => {
  const len = e.tempFiles.length
  for (let i = 0; i < len; i++) {
    ossConfig(e.tempFiles[i].url).then(res => {
      uploadImg.value.push({
        imageUrl: res,
        uuid: e.tempFiles[i].uuid
      })
    })
  }
}
const deleteHandler = (e) => {
  uploadImg.value = uploadImg.value.filter(item => item.uuid !== e.tempFile.uuid)
}

const review = ref({
  starLevel: 0,
  content: '',
  orderType: null,
  orderId: null,
  clickReview: (item) => {
    popup.value.open()
    review.value.orderType = item.orderType
    review.value.orderId = item.id
    review.value.starLevel = 0
    review.value.content = ''
  },
  submit: () => {
    if (!review.value.content) {
      uni.showToast({ title: '请输入评价', icon: 'none' })
      return
    }
    if (!review.value.starLevel || review.value.starLevel <= 0) {
      uni.showToast({ title: '请选择评分', icon: 'none' })
      return
    }
    uni.showLoading({ title: '加载中' })
    if (videosList.value.length > 0) {
      console.log('暂不支持上传视频')
    } else {
      const params = {
        reviewParams: JSON.stringify({
          starLevel: review.value.starLevel,
          content: review.value.content,
          reviewImg: uploadImg.value,
          reviewType: review.value.orderType,
          orderId: review.value.orderId
        })
      }
      $https({
        url: '/sensitive/check',
        type: '',
        method: 'post',
        data: {
          title: '',
          description: review.value.content
        }
      }).then(res => {
        $https({
          url: '/app/order/reviewOrder',
          type: '',
          method: 'post',
          data: params
        }).then(res => {
          uni.hideLoading()
          if (res.code === 0) {
            uni.showToast({ title: '操作成功', icon: 'none' })
            setTimeout(() => {
              popup.value.close()
              getData()
            }, 1000)
          }
        }).catch(c => uni.hideLoading())
      }).catch(c => uni.hideLoading())
    }
  }
})
const biscuitDeduction = computed(() => {
  if (!eventsOrder.value.biscuitDeduction) {
    return '未抵扣'
  } else {
    const biscuit = JSON.parse(eventsOrder.value.biscuitDeduction)
    return `${biscuit.biscuitAmount} 个小饼干抵扣 ¥${biscuit.deductionAmount / 100}`
  }
})

const person = ref({ list: [] })
const pet = ref({ list: [] })
const eventsOrder = ref({})
const reviewInfo = ref()
const randomUuidUrl = ref()
const eventsInfo = ref({})
// const query = wx.createSelectorQuery()
const getOrderStatus = () => {
  const toiletryOrderList = ['待支付', '已支付', '已完成', '已取消', '已退款']
  return toiletryOrderList[eventsOrder.value.orderStatus]
}
const getRefundStatus = () => {
  const refundStatusList = ['客服审核中', '客服审核中', '退款中', '已退款', '已驳回', '退款失败']
  return refundStatusList[refundStatus.value]
}

const toPay = () => {
  if (payWait.value) {
    return
  }
  payWait.value = true
  if ((eventsOrder.value.couponMoney && (eventsOrder.value.couponMoney / 100 <= eventsOrder.value.applyPrice)) || !eventsOrder.value.couponMoney) {
    const data = {
      tableId: eventsOrder.value.id
    }
    payJump(data)
  } else {
    const params = {
      orderType: eventsOrder.value.orderType,
      orderId: eventsOrder.value.id
    }
    $https({
      url: '/app/order/orderPay',
      type: '',
      method: 'post',
      data: params
    }).then(res => {
      if (res.code === 0) {
        uni.showToast({ title: '操作成功', icon: 'none' })
        getData()
        setTimeout(() => {
          uni.hideToast()
        }, 1000)
      } else {
        payWait.value = false
      }
    }).catch(() => {
      payWait.value = false
    })
  }
}
// 调起支付
const payJump = async order => {
  $https({
    url: '/app/order/pay',
    type: '',
    method: 'POST',
    data: {
      orderId: order.tableId,
      orderType: '0'
    }
  })
    .then(res => {
      if (res.code === 0) {
        $https({
          url: '/pay/query',
          type: 'public',
          data: {
            uuid: res.data.payOrder.uuid,
            openClientType: 'MP',
            pay: true
          }
        })
          .then(res1 => {
            if (res1.code === 0) {
              if (!res1.data.payWayList[0]) {
                uni.hideLoading()
                uni.showToast({ title: '收银台返回数据不正确' })
                return false
              }
              uni.login({
                success: reslogin => {
                  $https({
                    url: '/order/pay',
                    type: 'public',
                    method: 'POST',
                    data: {
                      payWayId: res1.data.payWayList[0].id,
                      uuid: res.data.payOrder.uuid,
                      scene: 'mp4',
                      wxCode: reslogin.code,
                      pay: true
                    }
                  })
                    .then(res2 => {
                      payWait.value = false
                      if (res2.code === 0) {
                        uni.requestPayment({
                          ...res2.data.signParam,
                          success: res => {
                            getData()
                            uni.hideLoading()
                          },
                          fail: () => {
                            uni.showToast({ title: '支付失败', icon: 'error' })
                            getData()
                            uni.hideLoading()
                          }
                        })
                      } else {
                        uni.hideLoading()
                      }
                    })
                    .catch(e => {
                      payWait.value = false
                      uni.hideLoading()
                    })
                },
                fail: () => {
                  uni.hideLoading()
                }
              })
            } else {
              payWait.value = false
              uni.hideLoading()
            }
          })
          .catch(e => {
            payWait.value = false
            uni.hideLoading()
          })
        // location.replace(res.data.jumpUrl + '&clientType=H5&orgin=cash')
      } else {
        payWait.value = false
        uni.hideLoading()
      }
    })
    .catch(e => {
      payWait.value = false
      uni.hideLoading()
    })
}
const isRefundOrder = ref(false)
const refundStatus = ref(null)
const refundOrderId = ref(null)
const orCodePopup = ref()
const orderId = ref()
const orCodeUrl = ref('')
const createOrCode = () => {
  orCodeUrl.value = randomUuidUrl.value
  orCodePopup.value.open()
}
onShow(() => {
  payWait.value = false
})
onLoad(option => {
  orderId.value = option.orderId
  isRefundOrder.value = option.isRefundOrder === 'true'
  if (isRefundOrder.value) {
    refundStatus.value = option.refundStatus
    refundOrderId.value = option.refundOrderId
  }
  getData().then(row => {
    if (isRefundOrder.value && reviewInfo.value.refundStatus) {
      refundStatus.value = reviewInfo.value.refundStatus
    }
  })
})

const getData = () => {
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/order/getAppEventOrderDetail',
      type: '',
      method: 'get',
      data: { orderId: orderId.value }
    }).then(res => {
      if (res.code === 0 && !!res.data) {
        eventsOrder.value = res.data.eventsOrder
        eventsOrder.value.orderType = 0
        eventsInfo.value = res.data.eventsInfo
        person.value.list = res.data.eventOrderPeopleList
        pet.value.list = res.data.eventOrderPetList
        reviewInfo.value = res.data.reviewInfo
        payWait.value = false
        randomUuidUrl.value = res.data.randomUuidUrl
      } else {
        payWait.value = false
      }
      resolve()
    }).catch(e => {
      payWait.value = false
      reject(e)
    })
  })
}
onBeforeUnmount(() => {
  uni.$off('getPersonInfo')
})
uni.$on('getPersonInfo', data => {
  if (data.personInfo) {
    person.value.list = data.personInfo
    suppltEvents(0)
  }
})
// 补充活动信息
const suppltEvents = (type) => {
  // type 0 人， 1 宠物
  const data = {
    orderId: orderId.value
  }
  if (type === 0) {
    data.orderPersonList = person.value.list
  }
  if (type === 1) {
    data.orderPetList = pet.value.list
  }
  $https({
    url: '/app/eventsOrder/supplement',
    type: '',
    method: 'POST',
    data
  }).then(res => {
    if (res.code === 0) {
      getData()
    }
  })
}
const copyOrder = () => {
  wx.setClipboardData({
    data: eventsOrder.value.eventsOrderNo,
    success () {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      })
    }
  })
}
const click = (url) => {
  uni.navigateTo({
    url
  })
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.container {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  min-height: 100vh;
  background: url(https://img.qumoyugo.com/webimgbg/icon_picopino_order-info_bg.jpg) no-repeat top center #FFF8F0;
  background-size: contain;
  &.ing-sf{
    background-image: url(https://img.qumoyugo.com/webimgbg/icon_picopino_order-info_bg_pay.jpg);
  }
  &.oth-sf{
    background-image: url(https://img.qumoyugo.com/webimgbg/icon_picopino_order-info_bg_oth-sf.png);
  }
}
.title {
  margin: 0 30rpx;
  padding-top: 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #252525;
}
.events-order{
  margin-left: 30rpx;
  padding-top: 16rpx;
  font-size: 24rpx;
  color: #999;
}
.box-content {
  margin: 30rpx;
  background: #ffffff;
  border-radius: 18rpx;
  padding: 0 30rpx 1rpx 30rpx;
}
.current-ord-if {
  padding: 24rpx;
  justify-content: center;
  align-items: center;
  color:#333;
  font-size: 26rpx;
  line-height: 26rpx;
  border-radius: 10rpx;
  background: #FFF8E1;
  margin-top: 30rpx;
  width: 50%;
  text-align: center;
}
.coupon-content {
  padding-bottom: 120rpx;
  background: #f4f4f4;
}
.box-title {
  padding-top: 28rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #000;
  padding-bottom: 20rpx;
  display: flex;
  align-items: center;
  position: relative;
  line-height: 32rpx;
  &::before{
    @include border(bottom, #EBEBEB)
  }
  .tips{
    font-size: 22rpx;
    color: #ED8241;
    margin-left: 8rpx;
    font-weight: normal;
    line-height: 24rpx;
    align-self: flex-end;
  }
  .icons{
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
}
.box-data {
  display: flex;
  flex-wrap: wrap;
  margin-left: -30rpx;
  .add-image {
    height: 52rpx;
    width: 52rpx;
    padding: 22rpx 36rpx;
  }
}
.box-notice {
  margin: 28rpx;
  height: 24rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #ee751e;
  line-height: 24rpx;
  display: flex;
  .notice-image {
    margin-right: 12rpx;
    width: 28rpx;
    height: 28rpx;
  }
}
.data-warp {
  border-radius: 10rpx;
  margin: 20rpx 0 10rpx 20rpx;
  padding: 20rpx 24rpx;
  background: #FFF8E1;
  color: #414141;
  line-height: 28rpx;
  width: 46%;
  font-size: 26rpx;
  text-align: center;
  font-weight: bold;
}
.contact-info {
  margin: 28rpx 0;
  display: flex;
  justify-content: flex-start;
  color: #666;
}
.coupon-info {
  display: flex;
  justify-content: flex-start;
  font-size: 26rpx;
  color: #333333;
  padding: 30rpx 30rpx 30rpx 44rpx;
  align-items: center;
  justify-content: space-between;
  line-height: 28rpx;
  .text-data{
    color: #999;
  }
}
.text-title {
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.text-data {
  font-size: 25rpx;
  font-weight: 500;
  color: #333333;
}
.text-title-remark {
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  white-space: nowrap;
}
.text-data-remark {
  font-size: 25rpx;
  font-weight: 500;
  color: #333333;
}
.remark-input {
  width: 653rpx;
  height: 278rpx;
  background: #ffffff;
  border: 1px solid #999999;
  border-radius: 8rpx;
  margin-left: 28rpx;
  margin-right: 28rpx;
  padding-bottom: 50rpx;
}
.remark-input-placeholder {
  color: #f76260;
}
.remark-input-data {
  margin-top: 19rpx;
  margin-left: 22rpx;
  font-size: 22rpx;
  font-weight: 400;
}

.booking_div {
  position: fixed;
  bottom: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  min-height: 70px;
  width: 100%;
  background-color: #ffffff;
  left: 0;
  padding: 14px 14px 0 14px;
  z-index: 98;

  .booking {
    width: 300rpx;
    float: right;
    height: 80rpx;
    background: #F0831E;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 78rpx;
    position: relative;
    &::before{
      @include border(full, #414141, 1000px)
    }
  }
  .price-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
  }
  .price-data-title {
    font-size: 22rpx;
    color: #666;
  }
  .price-data-content {
   margin: 0 8rpx;
    font-size: 40rpx;
    font-weight: 500;
    color: #ee751e;
    align-items: flex-end;
    display: flex;
    .price-icon{
      font-size: 28rpx;
      line-height: 30rpx;
    }
    .price-number{
      font-size: 40rpx;
      line-height: 42rpx;
    }
  }
}
.close_btn {
  float: right;
  margin: 10rpx 16rpx;
}
.list-data {
  padding-top: 10%;
}
.no-data {
  padding-top: 20%;
  text-align: center;
}
.coupon-prpup-content {
  height: 800rpx;
  .line-box {
    width: 735rpx;
    height: 210rpx;
    background-image: url('https://img.qumoyugo.com/img/P9F9FEAYIYMEEGSHIQN81688720571261.png');
    background-size: 100% 100%;
    &:last-child {
      border-bottom: none;
    }
  }
  .list-box {
    min-height: calc(100vh - 36px);
    background: #f4f4f4;
    padding: 9.03rpx 8.33rpx 0 8.33rpx;
  }
}
.cancel_button{
  width: 170rpx;
  height: 56rpx;
  border-radius: 28rpx;
  color: #999;
  text-align: center;
  font-size: 24rpx;
  position: relative;
  &::before{
    @include border(full, #999, 28rpx)
  }
}
.main_top_title{
  display: flex;
  align-content: space-between;
  font-size: 42rpx;
  color: #252525;
  font-weight: bold;
  line-height: 44rpx;
}
.main_top{
  display: flex;
  align-items: center;
  padding: 30rpx 30rpx 0 30rpx;
  margin-bottom: 40rpx;
}
.main_top_btn{
  margin-left: auto;
}
.orCode_div{
  padding: 55rpx;
}
.orCode_img{
  width: 400rpx;
  height: 400rpx;
}
.orCode_border{
  padding: 24rpx;
  border: 14rpx solid #EE751E70;
  margin-top: 55rpx;
  border-radius: 18rpx;
}
.orCode_title{
  font-size: 28rpx;
  font-weight: 500;
  color: #262626;
  line-height: 14rpx;
  text-align: center;
}

.review_time{
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  line-height: 14rpx;
}
.review_img_div {
  padding: 20rpx;
  width: 217rpx;
  height: 217rpx;
  display: inline-block;
}

.review_content {
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  padding: 0 20rpx 20rpx;
}
.review_img {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 18rpx;
}
.review_video_div, video {
  width: 100%;
  height: 100%;
}

.review_video_div {
  padding: 0 0 20rpx;
}
.orCode_div{
  padding: 55rpx;
}
.review_content{
  margin-top: 45rpx;
  display: flex;
  align-items: center;
}
.orCode_title{
  font-size: 28rpx;
  font-weight: 500;
  color: #262626;
  line-height: 14rpx;
}
.review_popup{
  padding: 45rpx 47rpx 0;
  max-height: 60%;
}
.startLevel{
  font-size: 29rpx;
  font-weight: 500;
  color: #333333;
  line-height: 14rpx;
  display: flex;
  align-items: center;
}
.review_main_img{
  width: 56.94rpx;
  height: 60.42rpx;
  margin-left: 18rpx;
}
.file_div{
  margin-top: 40rpx;
  max-height: 200px;
  overflow: auto;
}
.header-uploader{
  margin-bottom: 60rpx;
  padding-top: 24rpx;
}
.uploader-input-box {
  border-radius: 12rpx;
  color: #999999;
  font-size: 26rpx;
  height: 127.78rpx;
  width: 127.78rpx;
}
.uploader-input {
  height: 228rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.uploader__img{
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  position: relative;
  .icon{
    width: 58rpx;
    height: 66rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  .close{
    width: 36rpx;
    height: 36rpx;
    position: absolute;
    top: 6rpx;
    right: 6rpx;
    z-index: 4;
  }
  .pc{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .video{
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
  }
  .tips{
    width: 142rpx;
    background: #000000;
    opacity: 0.5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 24rpx;
    line-height: 24rpx;
    padding: 12rpx 0;
    text-align: center;
    color: #ffffff;
    border-radius: 12rpx;
  }
  .img-sw{
    width: 100%;
    height: 100%;
  }
}
.img-sw{
  width: 100%;
  height: 100%;
}
.bottom_div_popup{
  margin-top: 40rpx;
  width: 100%;
  padding-bottom: calc(env(safe-area-inset-bottom) + 22rpx);
}
.price_right{
  margin-left: auto;
}
.item_div_main{
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  margin-top:20rpx;
  padding-left: 28rpx;
  padding-bottom: 20rpx;
  padding-right: 28rpx;
  display: flex;
  align-items: center;
}
.price_left{
  font-size: 28rpx;
  font-weight: 500;
  color: #EE751E;
}
.price_number{
  font-size: 49rpx;
}
.box_file{
  display: flex;
  align-items: center;
}
.re_div{
  float: right;
  margin-right: 28rpx;
  margin-left: auto;
}
.border-bt{
  position: relative;
  &::before{
    @include border(top, #EBEBEB)
  }
}
</style>

<style scoped>
/deep/.uni-forms-item__label,
.default_txt {
  font-size: 25rpx !important;
  font-weight: 400 !important;
  color: #333333 !important;
}

/deep/.uni-forms {
  padding: 52rpx 28rpx 28rpx 28rpx;
  background-color: white;
  border-radius: 18rpx;
}
/deep/.input-padding {
  padding-top: 10rpx;
}
/deep/.uni-easyinput__placeholder-class {
  color: #999999 !important;
}
/deep/.uni-easyinput__content-input {
  /*-webkit-text-fill-color: black !important;*/
  font-size: 25rpx !important;
  font-weight: 400 !important;
  color: #333333 !important;
}
/deep/.uni-popup>view>uni-transition>view{
  border-radius: 18rpx 18rpx 0 0 !important;
}
/deep/.uni-grid-item{
  width: 100% !important;
}
/deep/ .uni-searchbar__box {
  background: white !important;
}
/deep/.is-add{
  width: 128rpx !important;
  height: 128rpx !important;
  border-radius: 18rpx !important;
}
/deep/.uni-popup .uni-popup__wrapper {
  max-height: 60%;
  overflow: auto;
  border-radius: 18rpx;
}
/deep/.uni-easyinput__content-input{
  background: #F0F0F0 !important;
}
</style>
